<template>
  <div>
    <div class="Ckplayer">
      <div id="video" :class="filterBlur" ref="video_ck"></div>
    </div>
    
    <div class="Ckplayer">
            <div id="video2" ref="video_ck2"></div>
            <div id="pixi"></div>
    </div>
    <div class="block">
      <el-slider :min="0" :max="7" v-model="value1" @change="handleChangeSlider"></el-slider>
    </div>
  </div>
</template>
<script>
import realVideo from "../assets/lifeGroupimg/realVideo.png";
export default {
  props: {
    src: {
      type: String
    }
  },
  data() {
    return {
      filterBlur: "filter-blur0",
      filterNum: 0,
      value1: 0,
      videoObjectPc: {
        width: 1015, // 宽度，也可以支持百分比(不过父元素宽度要有)
        height: 574, // 高度，也可以支持百分比
        container: "#video", //“#”代表容器的ID，“.”或“”代表容器的class
        variable: "player", //该属性必需设置，值等于下面的new chplayer()的对象
        autoplay: true, //自动播放
        live: true,
        // video: "rtmp://58.200.131.2:1935/livetv/hunantv" //视频地址 rtmp://58.200.131.2:1935/livetv/hunantv
        video: ''
      }

      // videoObjectPc2: {
      //   width: 1015, // 宽度，也可以支持百分比(不过父元素宽度要有)
      //   height: 574, // 高度，也可以支持百分比
      //   container: "#video2", //“#”代表容器的ID，“.”或“”代表容器的class
      //   variable: "player", //该属性必需设置，值等于下面的new chplayer()的对象
      //   autoplay: true, //自动播放
      //   live: true,
      //   video: "rtmp://58.200.131.2:1935/livetv/hunantv" //视频地址 rtmp://58.200.131.2:1935/livetv/hunantv
      // }
    };
  },
  methods: {
    handleChangeSlider(val) {
      console.log(val);
      this.filterBlur = "filter-blur" + val;
      this.filterNum = val;
      // this.init_pixi();
    },

    init_ckplayer() {
      //视频1
      this.$nextTick(() => {
        console.log(this.$refs.video_ck); //在$nextTick里面获取，打印数据 可以获取到播放器的dom元素
        if (this.$refs.video_ck != undefined) {
          let player = new ckplayer(this.videoObjectPc);
          console.log(player);
        }
      });

      //视频2
      // this.$nextTick(() => {
      //   console.log(this.$refs.video_ck2); //在$nextTick里面获取，打印数据 可以获取到播放器的dom元素
      //   if (this.$refs.video_ck2 != undefined) {
      //     let player = new ckplayer(this.videoObjectPc2);
      //     console.log(player);
      //   }
      // });
    },

    init_pixi() {
        //创建爱渲染器之前先删除子节点  防止调取这个方法时子节点不停地累加
    //     var ele=document.getElementById('pixi');
    //     console.log(ele)
    //     var child=ele.firstChild;
    //     console.log(child,'child');
    //     while(child){
    //         ele.removeChild(child);
    //         child=ele.firstChild;
    //     }
    //     //创建渲染器
    //     var renderer = PIXI.autoDetectRenderer(600, 375,{ antialias: false, transparent: true, resolution: 1 });
    //     //将canvas加入HTML文件中
    //     document.getElementById("pixi").appendChild(renderer.view);

    //     //创建一个名为舞台的容器对象
    //     var opacity=this.dealOpacity();
    //    var stage = new PIXI.Container();
    //    const rect = new PIXI.Graphics()
    //         .clear()
    //         .beginFill(0x00ff00,opacity)
    //         .drawRect(0, 0, 600, 375);
    //     // Add a blur filter
    //     rect.filters = [new PIXI.filters.BlurFilter()];
    //     stage.addChild(rect);
    //     //告诉渲染器去渲染舞台
    //     renderer.render(stage);
    },

    dealOpacity() {
      let opacity = 0;
      switch (this.filterNum) {
        case 0:
          opacity = 1;
          break;
        case 1:
          opacity = 0.8;
          break;
        case 2:
          opacity = 0.7;
          break;
        case 3:
          opacity = 0.6;
          break;
        case 4:
          opacity = 0.5;
          break;
        case 5:
          opacity = 0.3;
          break;
        case 6:
          opacity = 0.1;
          break;
        case 7:
          opacity = 0;
          break;
      }
      return opacity;
    }
  },
  mounted() {
    this.init_ckplayer();
    // this.init_pixi();
  }
};
</script>
<style lang="scss" scoped>
.block {
  width: 600px;
  margin: 0 auto;
}
.Ckplayer {
  // margin: 0 auto;
  width: 600px;
  height: 420px;
  position: relative;
  margin-top: 20px;
}
#video {
  width: 100%;
  height: 420px;
  // filter:opacity(40%);
  // filter: brightness(0.10);
  //filter: blur(3px);
}

.filter-blur0 {
  filter: blur(7px) grayscale(100%) opacity(50%);
}

.filter-blur1 {
  filter: blur(6px) grayscale(100%);
}

.filter-blur2 {
  filter: blur(5px) grayscale(100%);
}
.filter-blur3 {
  filter: blur(4px) grayscale(100%);
}
.filter-blur4 {
  filter: blur(3px) grayscale(100%) contrast(150%);
}

.filter-blur5 {
  filter: blur(2px) grayscale(100%) contrast(150%);
}
.filter-blur6 {
  filter: blur(1px) grayscale(100%);
}
.filter-blur7 {
  filter: blur(0px);
}

#video2 {
  width: 100%;
  height: 420px;
}

#pixi {
  width: 100%;
  height: 375px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
</style>